<template>
    <div class="MovingWater">
        <!--        面包导航-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>寝室管理</el-breadcrumb-item>
            <el-breadcrumb-item>抬水记录</el-breadcrumb-item>
        </el-breadcrumb>
        <!--        卡片-->
        <el-card class="box-card">
            <!--            搜索区域-->
            <el-row :gutter="20">
                <el-col :span="3">
                    <el-date-picker
                            v-model="queryInfo.createDate"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-col>
                <el-col :span="8">
                    <el-input placeholder="请输入抬水姓名"  v-model="queryInfo.name" clearable>
                        <el-button slot="append" icon="el-icon-search" @click="search" ></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addUserBy">添加</el-button>
                </el-col>
            </el-row>
            <!--            表格区域-->
            <el-table :data="signList" border>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="楼栋名字" prop="bname"></el-table-column>
                <el-table-column label="寝室名字" prop="qname"></el-table-column>
                <el-table-column label="抬水时间" prop="createDate"></el-table-column>
                <el-table-column label="类型" prop="statues">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.type ===0">普通纯净水</el-tag>
                        <el-tag type="success" v-else-if="scope.row.type ===1">有机物纯净水</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作"  width="180px">
                    <template slot-scope="scope">
                        <!--                            修改-->
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="updateScore(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--                分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.page"
                    :page-sizes="[5,10,20,50]"
                    :page-size="queryInfo.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>
        <!--        添加用户寝室信息-->
        <el-dialog
                title="添加抬水"
                :visible.sync="dialogAdd"
                width="50%" @close="coleAdd"
        >
            <el-cascader  v-model="qid" :options="bdo"  clearable ref="bdo"></el-cascader>
            <el-select v-model="type" placeholder="请选择" clearable>
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogAdd = false">取 消</el-button>
    <el-button type="primary" @click="addScore">确 定</el-button>
  </span>
        </el-dialog>
        <!--        修改-->
        <el-dialog
                title="分配寝室"
                :visible.sync="dialogUpdate"
                width="50%" @close="coleAdd"
        >
            <h3>{{name}}</h3>
            <el-select v-model="type" placeholder="请选择" clearable>
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogAdd = false">取 消</el-button>
    <el-button type="primary" @click="mpdofy">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "MovingWater",
        data(){
            return{
                signList: [],
                type: '',
                total: 0,
                queryInfo:{
                    page: 1,
                    size: 10,
                    createDate: '',
                },
                options: [{
                    value: '0',
                    label: '纯净水'
                }, {
                    value: '1',
                    label: '有机物纯净水'
                }],
                //添加显示框
                dialogAdd: false,
                //修改显示框
                dialogUpdate: false,
                //绑定练级框
                bdo: [],
                note: '',
                score: '',
                uid: '',
                qid: '',
                mdata: '',
                name: '',
                id: '',
            }
        },
        created() {
            this.getSignList()
        },
        methods:{
            async getSignList(){
                const {data: res} = await this.$http.get('score/getAllWater',{
                    params: this.queryInfo
                })
                if(res.code !== 200) return this.$message.error(res.message)
                this.signList = res.data.data
                this.total = res.data.total
            },
            //监听pagesize的改变
            handleSizeChange(newSize){
                this.queryInfo.size = newSize
                this.getSignList()
            },
            //页码值改变
            handleCurrentChange(newPage){
                this.queryInfo.page = newPage
                this.getSignList()
            },
            //搜索
            async search(){
                if(this.queryInfo.createDate !== '') {
                    this.queryInfo.createDate = this.dateFormat(this.queryInfo.createDate)
                }
                const {data: res} = await this.$http.get('score/getAllWater',{
                    params: this.queryInfo
                })
                if(res.code !== 200) return this.$message.error(res.message)
                this.signList = res.data.data
                this.total = res.data.total
            },
            //日期转换
            dateFormat(dateData) {
                var date = new Date(dateData)
                var y = date.getFullYear()
                var m = date.getMonth() + 1
                m = m < 10 ? ('0' + m) : m
                var d = date.getDate()
                d = d < 10 ? ('0' + d) : d
                const time = y + '-' + m + '-' + d
                return time
            },
            //添加
            async addUserBy(){
                this.dialogAdd = true
                const {data: ref} = await this.$http.get('score/getAllDOBybu')
                this.bdo = ref.data
            },
            //修改
            async updateScore(row){
                this.dialogUpdate = true
                this.name = row.bname + row.qname
                this.qid = row.qid
                this.id = row.id
            },
            //添加分数
            async addScore(){
                this.uid = window.sessionStorage.getItem('id')
                const {data: res} = await this.$http.get('score/addMovingWater',{
                    params:{
                        uid: this.uid,
                        qid: this.qid[1],
                        type: this.type
                    }
                })
                if(res.code !==0) return this.$message.error(res.message)
                this.$message.success(res.message)
                this.qid = ''
                this.type = ''
                this.dialogAdd = false
                this.getSignList()
            },
            //修改
            async mpdofy(){
                this.uid = window.sessionStorage.getItem('id')
                const {data: res} = await this.$http.get('score/updateMoving',{
                    params:{
                        id: this.id,
                        type: this.type,
                    }
                })
                if(res.code !==0) return this.$message.error(res.message)
                this.$message.success(res.message)
                this.qid = ''
                this.type = ''
                this.id = ''
                this.dialogUpdate = false
                this.getSignList()
            }

        }
    }
</script>

<style scoped>

</style>